<template>
	<div class="p-6 space-y-6">
		<!-- 客户反馈表单 -->
		<el-card>
			<h3 class="text-lg font-semibold mb-4">📝 提交问题反馈</h3>
			<el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="联系方式" prop="contact">
					<el-input v-model="form.contact" />
				</el-form-item>
				<el-form-item label="问题描述" prop="message">
					<el-input type="textarea" v-model="form.message" rows="4" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm">提交反馈</el-button>
				</el-form-item>
			</el-form>
		</el-card>

		<!-- 常见问题 -->
		<el-card>
			<h3 class="text-lg font-semibold mb-4">💬 常见问题</h3>
			<el-collapse>
				<el-collapse-item v-for="(faq, index) in faqs" :key="index" :title="faq.question">
					{{ faq.answer }}
				</el-collapse-item>
			</el-collapse>
		</el-card>

		<!-- 联系我们 -->
		<el-card>
			<h3 class="text-lg font-semibold mb-4">📞 联系我们</h3>
			<p>客服电话：400-123-4567</p>
			<p>邮箱：support@example.com</p>
			<p>地址：沈阳市浑南区科技园路1号</p>
		</el-card>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const form = ref({ name: '', contact: '', message: '' })
const formRef = ref()
const rules = {
	name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
	contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
	message: [{ required: true, message: '请输入问题描述', trigger: 'blur' }]
}

const submitForm = () => {
	formRef.value.validate(valid => {
		if (valid) {
			ElMessage.success('反馈已提交，我们会尽快处理！')
			form.value = { name: '', contact: '', message: '' }
		}
	})
}

const faqs = ref([
	{ question: '如何查看我的订单？', answer: '您可以在个人中心查看订单记录。' },
	{ question: '如何联系客服？', answer: '您可以通过页面底部的联系方式联系客服。' },
	{ question: '支持哪些支付方式？', answer: '支持微信、支付宝和银行卡支付。' },
	{ question: '如何添加收藏？', answer: '在商品详情页点击“收藏”按钮即可。' },
	{ question: '如何删除购物车中的商品？', answer: '在购物车页面点击删除按钮即可。' },
	{ question: '为什么无法支付？', answer: '请检查您的账户余额或支付方式是否可用。' },
	{ question: '如何更改密码？', answer: '在个人中心安全设置中可以修改密码。' }
])
</script>

<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
